<!--
* description: 采购单明细查询
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="包装样式明细查询"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="800px"
      @close="close"
    >
      <dialogHeader slot="title" title="包装样式明细查询" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params">
        <el-row :gutter="26">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
          >
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="包装编号" prop="MATERIALS_CODE" align="center"></el-table-column>
            <el-table-column label="包装名称" prop="MATERIALS_NAME" align="center"></el-table-column>
            <el-table-column label="包材数量" prop="MATERIALS_NUM" align="center"></el-table-column>
          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    talbeRowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isShow,
      // 表格数据
      tableData: []
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    queryTable() {
      let reqData = {};
      reqData.MATERIALS_STYLE_ID = this.talbeRowData.MATERIALS_STYLE_ID;
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/materialsStyle/queryMaterialsStyleD.do",
        method: "post",
        data: reqData
      })
        .then(res => {
          this.listLoading = false;
          if (res.result === "1") {
            if (res.listRow && res.listRow.length > 0) {
              this.tableData = res.listRow;
            }
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
            }
          }
        })
        .catch(err => {
          console.info(err);
          this.listLoading = false;
        });
    }
  }
};
</script>
